<template>
  <!-- -->
  <div class="lc-editor-wrapper lc-cell-wrapper">
    <cell
      v-if="label"
      :title="label"
      :required="required"
      :center="center"
      :border="border"
      :class="bem({
        error,
        disable:$attrs.disable,
        readonly: readonly,
        [`label-${labelAlign}`]: labelAlign
      })"
    />
    <div
      v-if="readonly"
      class="editor-content"
      v-html="content"/>
    <vue-html5-editor
      v-else
      ref="content"
      :content="content"
      :height="height||150"
      :z-index="zIndex"
      :auto-height="autoHeight"
      :show-module-name="showModuleName"
      @change="changeData"
    />
    <div
      v-if="desc"
      :class="bem('desc')"
      v-text="desc"
    />
	<!-- 录音 -->
	<div class="record" v-show="!readonly">
		<audio id="luyin" :src="videoUrl" controls></audio>
	</div>
  </div>
</template>
<script>
import Vue from 'vue'
import create from '../utils/create'
import VueHtml5Editor from 'vue-html5-editor'
import options from './options'
import Common from '@/components/common.vue'

export default create({
  name: 'lc-editor',
  props: {
    value: String,
    label: String,
    desc: String,
    icon: String,
    error: Boolean,
    center: Boolean,
    leftIcon: String,
    required: Boolean,
    clearable: {
      type: Boolean,
      default: true
    },
    undoable: Boolean,
    labelAlign: String,
    errorMessage: String,
    placeholder: String,
    border: {
      type: Boolean,
      default: true
    },
    readonly: {
      type: Boolean,
      default: false
    },
    options: Object,
    height: {
      type: Number,
      default: 150,
      validator(val) {
        return val >= 100
      }
    },
    zIndex: {
      type: Number,
      default: 99
    },
    autoHeight: {
      type: Boolean,
      default: true
    },
    showModuleName: {}
  },
  data() {
    return {
      content: '',
	  videoUrl: '', // 录音地址
    }
  },
  created() {
    Vue.use(VueHtml5Editor, options)
	this.videoUrl = Common.fileService2 + Common.wav;
  },
  watch: {
    value() {
      this.content = this.value
    }
  },
  methods: {
    changeData(data) {
      this.$emit('input', data)
      this.$emit('change-data', data)
    }
  },
  mounted() {
    this.content = this.value;
	this.videoUrl = Common.fileService2 + Common.wav;
	console.log(Common.fileService2 + Common.wav)
  }
})
</script>
<style lang="scss" scoped>
  .editor-content{
    background-color: #fff;
    padding:5px 15px 15px 15px;
  }
	/* 录音 */
	.record {
		padding: 15px;
		background-color: #fff;
		audio {
			width: 100%;
			height: 40px;
			margin-bottom: 10px;
		}
	}
</style>

